<style lang="scss" scoped>
@import "@/assets/css/variable";
.activityShow {
  width: 100%;
  // top: 0;
  // left: 0;
  // bottom: 0;
  // right: 0;
  // height: 1500px;
  padding-bottom: 6.2rem;
  background-color: #f7f8fa;
  min-height: 100%;
  font-size: 1.2rem;
  box-sizing: border-box;
  position: relative;
  flex: 1;
  // overflow: hidden;
  $radiusSize: 100%;
  display: flex;
  flex-direction: column;
  .activyshow_data {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 2.4rem;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #fff;
    font-size: 1.2rem;
    // border-radius: 2.4rem;
    border-radius: 0 0 50% 50%;
    z-index: 88;
    div {
      display: flex;
      align-items: center;
      .icon_btn {
        color: var(--btn_color);
        margin-right: 5px;
        font-size: 1.4rem;
      }
    }
  }

  .sweips {
    width: 100%;
    height: 50%;
    img {
      height: 100%;
    }
  }
  .exothecium {
    display: flex;
    width: 100%;
    height: 7.5rem;
    justify-content: center;
    align-items: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: var(--theme_color);
    font-size: 1.25rem;
    color: #fff;
    .text {
      margin-right: 4px;
    }
    .out_time {
      span {
        background-color: #fff;
        color: var(--theme_color);
        padding: 0 2px;
        border-radius: 3px;
        margin-left: 4px;
      }
    }
  }

  .conter {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    background-color: #fff;
    padding: 1rem 1.6rem;
    .share {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 2rem;
      h3 {
        font-size: 1.4rem;
      }
      .share_btn {
        background-color: var(--btn_color);
        color: #fff;
      }
    }
    .copy_writer {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .the_price {
        :nth-child(1) {
          font-size: 1.3rem;
          color: var(--theme_color);
        }
        :nth-child(2) {
          font-size: 2.5rem;
          color: var(--theme_color);
          margin-right: 5px;
        }
        :nth-child(3) {
          text-decoration: line-through;
          color: #999;
        }
      }

      .been_robbed {
        color: #999;
      }
    }
  }

  .activity {
    background-color: var(--theme_color);
    display: flex;
    flex-direction: column;
    align-items: center;
    .coupons {
      margin-top: 3.5rem;
      width: 90%;
      background-color: #fff;
      border-radius: 8px;
      padding: 1.5rem 1rem 1rem;
      box-sizing: border-box;
      position: relative;

      .title {
        width: 12rem;
        height: 3rem;
        background: var(--btn_color);
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        line-height: 3rem;
        text-align: center;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        letter-spacing: 0.3rem;
        font-size: 1.4rem;
        span {
          display: inline-block;
          width: 1rem;
          height: 1rem;
          border-radius: 1rem;
          background-color: #ffdb89;
        }
        span:nth-child(1) {
          margin-right: 0.5rem;
        }
        span:nth-child(2) {
          margin-left: 0.2rem;
        }
        .triangle_left_border {
          width: 0;
          height: 0;
          border-bottom: 1.5rem solid var(--btn_color);
          border-left: 1.5rem solid transparent;
          position: absolute;
          left: 0%;
          top: 0%;
          margin-left: -1.5rem;
        }
        .triangle_right_border {
          width: 0;
          height: 0;
          border-bottom: 1.5rem solid var(--btn_color);
          border-right: 1.5rem solid transparent;
          position: absolute;
          left: 100%;
          top: 0%;
        }
      }
      // 礼包内容
      .title_one {
        margin-top: 2rem;
        :nth-child(1) {
          font-size: 1.6rem;
          margin-right: 5px;
          color: #333333;
        }
        :nth-child(2) {
          color: #99b5d7;
        }
      }

      .title_two {
        width: 100%;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        margin-top: 1rem;
        width: 100%;
        border: 1px solid #ffe4bd;
        background-color: #fff9f0;
        border-radius: 8px;
        padding: 1rem;
        .vouchers {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
        }
        .vouchers1 {
          font-size: 0.5rem;
        }
      }
      // 礼包详情
      .activity1 {
        box-sizing: border-box;
        width: 100%;
        margin-top: 1rem;
        background-color: #fff;
        border-radius: 10px;
      }

      // 参与群体
      .group {
        margin-top: 1rem;
        .group_one {
          margin-bottom: 1rem;
          font-size: 2rem;
        }
        .group_two {
          display: flex;
          justify-content: space-around;
          flex-direction: row;
          flex-wrap: wrap;
          .group_active {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 20%;
            margin-bottom: 10px;
            span {
              width: 100%;
              text-align: center;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }

        .group_three {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 2.5rem;
          // margin-bottom: 2.5rem;
          .conter_group_one {
            display: flex;
            align-items: center;
            .max {
              display: flex;
              flex-direction: column;
              margin-left: 10px;
              font-size: 1.6rem;
            }
          }
          .conter_group_two {
            display: flex;
            flex-direction: column;
            text-align: right;
            font-size: 1.6rem;
            color: #999;
          }
        }
      }
      .seamless-warp {
        height: 28rem;
        overflow: hidden;
      }

      // 佣金排行
      .commission {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 2.5rem;
        .conter_group_one {
          display: flex;
          align-items: center;
          .max {
            display: flex;
            align-items: center;
            margin-left: 4rem;
            font-size: 1.6rem;
            span {
              // padding: 100px;
              display: inline-block;
              margin-left: 10px;
            }
          }
        }
        .conter_group_two {
          display: flex;
          flex-direction: column;
          text-align: right;
          font-size: 1.6rem;
          color: #999;
        }
      }
    }
  }

  .tuan_button {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    height: 4rem;
    background: -webkit-linear-gradient(top, #f2f2f2, #fd8701);
    background-color: #fe7b58;
    border-radius: 4rem;
    line-height: 4rem;
    text-align: center;
    color: #fff;
    font-size: 1.7rem;
  }

  .show {
    height: auto;
    background-color: white;
    position: relative;
    .close-icon {
      position: absolute;
      width: 2.4rem;
      height: 2.4rem;
      right: 0.7rem;
      top: 0.7rem;
      border-radius: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
    }
    img {
      width: 100%;
    }
    .posterHtml {
      // display: flex;
      #coverImg {
        display: flex;
        width: 100%;
        max-height: 30rem;
        object-fit: cover;
      }
      .imgBox {
        width: 100%;
      }
      .content {
        padding: 1.2rem;
        display: flex;
        height: 14rem;
        justify-content: space-between;
        .desc {
          word-wrap: break-word;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          height: 100%;
          .line1 {
            font-size: 2rem;
            font-weight: bold;
            color: #333;
            display: flex;
            align-items: center;
          }
          .line2 {
            font-size: 2.2rem;
            font-weight: 900;
            color: #111;
            // overflow: hidden;
            // text-overflow: ellipsis;
            // display: -webkit-box;
            // -webkit-line-clamp:2; /* 设置行数 */
            // -webkit-box-orient:vertical;
          }
        }
        .qrcode {
        }
      }
      .bottom-box {
        padding-bottom: 2rem;
        padding-left: 1.2rem;
        padding-right: 1.2rem;
      }
    }
  }

  .imgBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba($color: #000000, $alpha: 0.98);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3000;
    img {
      width: 100%;
    }
    .tips {
      color: white;
    }
    .close-icon {
      position: fixed;
      width: 2.4rem;
      height: 2.4rem;
      right: 0.7rem;
      top: 0.7rem;
      border-radius: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 3002;
    }
  }

  .navigation {
    position: fixed;
    box-sizing: border-box;
    top: 13rem;
    right: 1rem;
    z-index: 1;
    // background-color: var(--btn_color);
    text-align: center;
    color: #fff;
    font-size: 1.2rem;
    border-radius: 3px;
    .my_tuan:nth-child(1) {
      // margin-bottom: 1rem;
      // border-bottom: 1px solid #fff;
    }
    .my_tuan {
      box-sizing: border-box;
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 8px;
      width: 100%;
      margin-bottom: 1rem;
      // height: 3rem;
      padding: 0.5rem 0.5rem;
      // line-height: 3rem;
    }
  }
  .fix-bottom {
    display: flex;
    overflow: hidden;
    position: fixed;
    bottom: 1rem;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 3;
    box-sizing: border-box;
  }

  .dwon_btn {
    .tuan_btn {
      background-color: var(--btn_color);
      border-radius: 8px;
      // box-shadow: 1px 1px 2px #555555;
      color: #fff;
      font-size: 1.2rem;
      letter-spacing: 0.3rem;
      border: 0;
    }
    .release_btn1 {
      background-color: var(--btn_color);
      margin-right: 15px;
      border-radius: 8px;
      font-size: 1.2rem;
      letter-spacing: 0.3rem;
      color: #fff;
      border: 0;
    }
  }

  .lucky_model {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 80%;
    z-index: 10;
    background-color: #ffdb89;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .close-icon {
      position: absolute;
      width: 2.4rem;
      height: 2.4rem;
      right: 0.7rem;
      top: 0.7rem;
      border-radius: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 13;
    }
  }

  .vanPopup {
    box-sizing: border-box;
    overflow: hidden;
    background-color: var(--theme_color);
    .gift_pop {
      position: relative;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: auto;
      background-color: white;
      position: relative;
      padding: 2rem 0;
      background-color: var(--theme_color);
      .close-icon {
        position: fixed;

        width: 2.4rem;
        height: 2.4rem;
        right: 0.7rem;
        bottom: 55%;
        border-radius: 1.2rem;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2;
      }
      .gift_list {
        display: flex;
        flex-direction: column;
        align-items: center;
        h3 {
          color: #333333;
          font-size: 20px;
          margin-bottom: 10px;
        }
        p {
          color: #4a4a4a;
        }
      }
      .conter {
        box-sizing: border-box;
        width: 80%;
        height: 3rem;
        margin: 1rem 0 0 1rem;
        .text3 {
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #333333;
          height: 2rem;
          .avatarandname {
            display: flex;
            align-items: center;
            .name {
              margin-left: 15px;
            }
          }
          .prize_type {
            display: flex;
            align-items: center;
            .button {
              margin-left: 10px;
              background-color: var(--btn_color);
              border: 0;
              color: #fff;
            }
          }
        }
      }
    }
  }
}
</style>
<template>
  <div
    class="activityShow"
    :style="{ '--theme_color': theme_color, '--btn_color': btn_color }"
  >
    <music-play
      v-if="activityItem.music"
      :activityItem="activityItem"
    ></music-play>
    <div class="activyshow_data">
      <div>
        <van-icon name="eye-o" class="icon_btn" />
        <span>{{ activityItem.browse_num }}</span>
      </div>
      <div>
        <van-icon name="friends-o" class="icon_btn" />
        <span>{{ visitLists.length }}</span>
      </div>
      <div>
        <van-icon name="shopping-cart-o" class="icon_btn" />
        <span>{{ orderList.length || 0 }}</span>
      </div>
    </div>
    <div class="sweips">
      <img :src="activityItem.cover" alt="" />
    </div>
    <div class="exothecium">
      <div class="text">距离结束:</div>
      <div class="out_time">
        <span>{{ DD }}</span> 天: <span>{{ HH }}</span> 时:
        <span>{{ MM }}</span> 分: <span>{{ SS }}</span> 秒
      </div>
    </div>

    <div class="conter">
      <div class="share">
        <h3>{{ activityItem.sharetitle }}</h3>
        <div>
          <!-- <van-button size="mini" round @click="shareBtn" class="share_btn">分享</van-button> -->
          <!-- <van-button size="mini" round @click="luckyBtn" class="share_btn">抽奖</van-button> -->
        </div>
      </div>

      <div class="copy_writer">
        <div class="the_price">
          <span>￥</span>
          <span>{{ val.active_price }}</span>
          <span>￥{{ val.price }}</span>
        </div>
        <div class="been_robbed">已抢{{ orderList.length || 0 }}</div>
      </div>
    </div>

    <div class="activity">
      <!-- <div class="coupons">
         <div class="title">
           <span></span>
           <div>礼包内容</div>
           <span></span>
           <div class="triangle_left_border"></div>
           <div class="triangle_right_border"></div>
         </div>
         <div class="title_one">
           <span>优惠券</span>
           <span>共4张</span>
         </div>
         <div class="title_two">
            <div>
              <van-image
              width="80"
              height="80"
              :src="yhqImg"
              />
            </div>
            <div class="vouchers">
              <h2>秘制养生三伏贴（6贴）</h2>
              <div class="vouchers1">
                <div>{{ activityItem.start_time }} 至 </div>
                <div>{{ activityItem.end_time }}</div>
              </div>
            </div>
          </div>
          <div class="title_two">
            <div>
              <van-image
              width="80"
              height="80"
              :src="yhqImg"
              />
            </div>
            <div class="vouchers">
              <h2>秘制养生三伏贴（6贴）</h2>
              <div class="vouchers1">
                <div>{{ activityItem.start_time }} 至 </div>
                <div>{{ activityItem.end_time }}</div>
              </div>
            </div>
          </div>
        </div> -->

      <div class="coupons">
        <div class="title">
          <span></span>
          <div>活动内容</div>
          <span></span>
          <div class="triangle_left_border"></div>
          <div class="triangle_right_border"></div>
        </div>

        <div class="activity1">
          <div style="margin-bottom: 10px">
            <div style="font-size: 15px">活动时间</div>
            <div style="margin-top: 10px">
              {{ activityItem.start_time }} 至 {{ activityItem.end_time }}
            </div>
          </div>
          <div style="margin-bottom: 10px; font-size: 15px">活动介绍</div>
          <div v-for="item in introduce" :key="item.id">
            <van-image
              v-if="item.type == 'img'"
              width="200"
              height="200"
              :src="item.value"
            />
            <div
              style="margin-bottom: 10px"
              class="margT-m line-height-l fs-12"
              v-if="item.type == 'text'"
              v-html="item.value"
            ></div>
          </div>
        </div>
      </div>

      <div class="coupons">
        <div class="title">
          <span></span>
          <div>参与群体</div>
          <span></span>
          <div class="triangle_left_border"></div>
          <div class="triangle_right_border"></div>
        </div>
        <div class="group">
          <div class="group_one">浏览({{ activityItem.browse_num }})</div>
          <div class="group_two">
            <div class="group_active" v-for="(item, i) in visitList" :key="i">
              <van-image round width="40" height="40" :src="item.avatar" />
              <span style="margin-top: 8px; font-size: 1.5rem">{{
                item.nickname
              }}</span>
            </div>
          </div>

          <div class="group_one" style="margin-top: 12px">
            购买({{ orderList.length }})
          </div>
          <template v-loading="loadingAdd">
            <vue-seamless-scroll
              :data="orderList"
              :class-option="optionSetting"
              class="seamless-warp"
              v-if="orderList.length > 0"
            >
              <div class="group_three" v-for="(item, i) in orderList" :key="i">
                <div class="conter_group_one">
                  <div style="width: 40px; height: 40px">
                    <img
                      style="width: 40px; height: 40px; border-radius: 20px"
                      :src="item.avatar"
                    />
                  </div>
                  <div class="max">
                    <span style="margin-bottom: 0.8rem">{{
                      item.nickname
                    }}</span>
                  </div>
                </div>
                <div class="conter_group_two">
                  <span style="color: #ff6502; margin-bottom: 0.8rem"
                    >￥{{ item.price }}</span
                  >
                  <span>{{ item.createtime }}</span>
                </div>
              </div>
            </vue-seamless-scroll>
            <NodataPiz v-else></NodataPiz>
          </template>
        </div>
      </div>

      <div class="coupons" v-if="commissionList.length > 0">
        <div class="title">
          <span></span>
          <div>佣金排行</div>
          <span></span>
          <div class="triangle_left_border"></div>
          <div class="triangle_right_border"></div>
        </div>

        <vue-seamless-scroll
          :data="commissionList"
          :class-option="optionSetting"
          class="seamless-warp"
          v-if="orderList.length > 0"
        >
          <div class="commission" v-for="(item, i) in commissionList" :key="i">
            <div class="conter_group_one">
              <div style="font-size: 1.6rem">
                {{ i + 1 }}
              </div>
              <div class="max">
                <div style="width: 40px; height: 40px">
                  <img
                    style="width: 40px; height: 40px; border-radius: 20px"
                    :src="item.avatar"
                  />
                </div>
                <span>{{ item.nickname }}</span>
              </div>
            </div>
            <div class="conter_group_two">
              <span style="color: #333333; margin-bottom: 0.8rem"
                >￥{{ item.price }}</span
              >
            </div>
          </div>
        </vue-seamless-scroll>
        <NodataPiz v-else></NodataPiz>
      </div>

      <infor-mation :activityItem="activityItem"></infor-mation>
    </div>

    <div class="fix-bottom padding-lr dwon_btn">
      <!-- <van-button
        size="normal"
        v-if="activityItem.act_release == 1"
        @click="releaseClick"
        class="release_btn1"
        block
        >创建活动</van-button
      > -->
      <!-- <a class="a_click"></a> -->
      <van-button
        size="normal"
        block
        @click="luckyBtn"
        class="release_btn1"
        v-if="val.is_openlottery"
        >抽奖</van-button
      >
      <van-button size="normal" block @click="tuanClick" class="tuan_btn">
        {{ activityItem.status == 1 ? val.active_title : "活动结束" }}
      </van-button>
    </div>

    <div class="navigation">
      <!-- <div class="my_tuan" @click="myGroup">我的团队</div> -->
      <div class="my_tuan" @click="orderGroup">订单</div>
      <!-- <div class="my_tuan" @click="envelopeGroup">红包排行</div> -->
      <div
        class="my_tuan"
        @click="wthdrawGroup"
        v-if="val.distribution_status != -1"
      >
        余额
      </div>
      <div class="my_tuan" @click="shareBtn1">分享</div>
      <div class="my_tuan" v-if="val.is_openlottery" @click="giftClick">
        奖品
      </div>
    </div>

    <Footer :config="config"></Footer>

    <!-- 分享 -->
    <van-popup v-model="showPop" position="bottom" round>
      <div class="show">
        <span
          class="close-icon"
          :style="{ backgroundColor: theme_color }"
          @click="showPop = false"
          ><van-icon color="white" name="cross"
        /></span>
        <!-- 海报html元素 -->
        <div id="posterHtml" class="posterHtml">
          <img id="coverImg" :src="copyimg" />
          <div class="content">
            <div class="desc">
              <div class="line1">
                <span>快来参加</span>
                <van-icon class="margL-m" name="fire" :color="theme_color" />
              </div>
              <div class="line2">{{ activityItem.title }}</div>
            </div>
            <!-- 二维码 -->
            <canvas class="qrcode" id="qrCode-canvas"></canvas>
          </div>
          <div class="margT-l bottom-box">
            <div class="fs-16 t-bold">{{ activityItem.merchantname }}</div>
            <div class="color-m margT-m" style="display:flex; center;">
              <span></span>
              <span>本次活动 {{ activityItem.end_time }} 结束</span>
              <span></span>
            </div>
          </div>
        </div>
        <div class="padding-lr">
          <van-button
            :color="theme_color"
            block
            @click="createPoster"
            :loading="createLoading"
            >生成海报</van-button
          >
        </div>
      </div>
    </van-popup>
    <div class="imgBox" v-if="showImgPop">
      <img :src="createImg" />
      <div class="tips margT-m fs-16">Tips:长按以上海报即可保存或转发</div>
      <span
        class="close-icon"
        :style="{ backgroundColor: theme_color }"
        @click="showImgPop = false"
        ><van-icon color="white" name="cross"
      /></span>
    </div>

    <!-- 抽奖模块 -->
    <van-overlay lock-scroll :show="luckyShow">
      <div
        class="lucky_model"
        v-if="luckyShow"
        :style="{
          '--theme_color': theme_color,
          backgroundImage:
            'url(' +
            'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-d6d772e8-edba-4e51-a6a3-850f3326ab0d/4872975a-9026-4edb-b406-3194deea63dd.png' +
            ')',
        }"
      >
        <span
          class="close-icon"
          :style="{ backgroundColor: btn_color }"
          @click="luckyShow = false"
          ><van-icon color="white" name="cross"
        /></span>
        <lucky-draw
          :prizeList="prizeList"
          :activityItem="activityItem"
          @getPagePriz="getPagePrizs"
        ></lucky-draw>
      </div>
    </van-overlay>

    <!-- 滚动 -->
    <scroll-data
      v-if="scrollList.length != 0"
      :scrollList="scrollList"
    ></scroll-data>
    <!-- 分享蒙版 -->
    <share-mask
      v-if="cancelShow"
      @shareChange="shareChange"
      @cancelChange="cancelChange"
    ></share-mask>

    <!-- 创建活动 -->
    <CreateActivities
      v-if="activityItem.act_release == 1"
      @helpPlugChange="helpPlugChange"
    ></CreateActivities>
    <!-- 礼品 -->
    <!-- 我的礼品 -->
    <!-- 奖品列表 -->
    <van-popup
      class="vanPopup"
      v-if="showGift"
      v-model="showGift"
      position="bottom"
      :style="{ height: '60%' }"
      round
    >
      <div class="gift_pop">
        <span
          class="close-icon"
          :style="{ backgroundColor: btn_color }"
          @click="showGift = false"
          ><van-icon color="white" name="cross"
        /></span>
        <div style="padding: 0 15px; width: 100%">
          <infor-prize
            :activityItem="activityItem"
            :openid="openid"
            :prizeLists="prizeLists"
          ></infor-prize>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {
  Button,
  Toast,
  Tab,
  Tabs,
  Icon,
  Dialog,
  Popup,
  Image as VanImage,
  AddressEdit,
  AddressList,
  Overlay,
} from "vant";
import QRCode from "qrcode";
import html2canvas from "html2canvas";
import Header from "@/components/headerlotto";
import InforMation from "@/components/InforMation";
import ScrollData from "@/components/ScrollData";
import LuckyDraw from "@/components/LuckyDraw";
import yhqImg from "./../../../assets/img/yhq.png";
import InforPrize from "@/components/InforPrize";
import MusicPlay from "@/components/MusicPlay";
import NodataPiz from "@/components/NodataPiz";
import Footer from "@/components/Footer";
import ShareMask from "@/components/ShareMask";
import CreateActivities from "@/components/CreateActivities";
// import { areaList } from "@vant/area-data";
// import func from 'vue-editor-bridge';
import utils from "@/assets/js/utils.js";
export default {
  name: "groupBuyingactivityShow",
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button,
    [Icon.name]: Icon,
    [Dialog.name]: Dialog,
    [Popup.name]: Popup,
    [VanImage.name]: VanImage,
    [AddressEdit.name]: AddressEdit,
    [AddressList.name]: AddressList,
    [Overlay.name]: Overlay,
    Header,
    InforMation,
    LuckyDraw,
    ScrollData,
    InforPrize,
    MusicPlay,
    NodataPiz,
    Footer,
    ShareMask,
    CreateActivities,
  },
  data() {
    return {
      yhqImg: yhqImg,
      config: "",
      p_openid: "",
      is_apply: false,
      showPop: false,
      showImgPop: false,
      createLoading: false,
      id: "",
      createImg: "",
      config: "",
      activityItem: {},
      val: {},
      endtime: "",
      // tuanendtime: "",
      flag: false,
      openid: localStorage.getItem("COPENID"),
      DD: "00",
      HH: "00",
      MM: "00",
      SS: "00",
      IngroupList: [],
      introduce: [],
      create_form: {},
      offeredList: [],
      orderItem: {},
      is_apply: false,
      temp: null, //倒计时初始
      activity_id: null,
      theme_color: "",
      btn_color: "",
      is_refund: false,
      is_withdrawal: false,
      copyimg: "",
      luckyShow: false,
      prizeList: {},
      scrollList: [],
      visitList: [],
      // 没过滤数据
      visitLists: [],
      orderList: [],
      commissionList: [],
      loadingAdd: false,
      prizeLists: [],
      showGift: false,
      draw: 0,
      virtualList: [],
      is_edit: 0,
      staff_id: null,
      domain: {},
      cancelShow: false,
    };
  },

  created() {
    // localStorage.setItem("COPENID", "obD_t1NOwcv_shMMZV4NcblmC7Sk");
    // localStorage.setItem("COPENID", "obD_t1D_-_MgWCD3T3Jtk6GPdCUw")
    this.activity_id = Number(this.$route.params.id);
    // document.title = "活动宝";
    console.log("setTitle");

    // this.getAvatarPage()
    console.log(new Date().getTime() + 10000000);
    // this.getActivityItem()
  },
  computed: {
    optionSetting() {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  destroyed() {
    //需要销毁
    clearInterval(this.temp);
    this.activityItem = {};
    this.$forceUpdate();
    console.log(this.temp, "销毁");
  },
  mounted() {
    const _this = this;
    let time = setInterval(() => {
      if (_this.flag == true) {
        clearInterval(time);
      }
      _this.timeDown();
    }, 1000);
    _this.staff_id = _this.$route.query.staff_id;
    _this.activityItem = _this.$store.state.activityItem;
    _this.getDomain();
    // 获取用户在后台管理系统中自定义的H5页面所显示的应用名称
    _this.ConfigItem();
  },
  methods: {
    getDomain() {
      const _this = this;
      if (process.env.NODE_ENV == "production") {
        _this.openid = localStorage.getItem("COPENID");
        if (
          _this.$route.query.openid &&
          _this.$route.query.openid != "undefined"
        ) {
          _this.openid = _this.$route.query.openid;
          localStorage.setItem("COPENID", _this.openid);
        }
      } else {
        _this.openid = _this.$store.state.openid;
      }
      let params = {};
      _this.$request.getDomain(params).then((res) => {
        if (res.ret == 200) {
          if (res.data.value.mainUrl && res.data.value.cannonUrl) {
            let domain = {
              mainUrl: res.data.value.mainUrl,
              cannonUrl: res.data.value.cannonUrl,
            };
            _this.domain = domain;

            console.log(
              "cannonUrl:" + location.href.indexOf(_this.domain.cannonUrl)
            );
            if (location.href.indexOf(_this.domain.cannonUrl) > -1) {
              _this.openid = _this.$route.query.openid;
              localStorage.setItem("COPENID", _this.openid);
              console.log("cannonUrl_this.openid", _this.openid);
            }
            //openid没拿到的时候
            if (!_this.openid || _this.openid == "undefined") {
              //当前为炮灰域名的时候
              if (location.href.indexOf(_this.domain.cannonUrl) > -1) {
                //跳转到主域名
                window.location.href = `${_this.domain.mainUrl}${
                  location.href.indexOf("addons") > -1
                    ? "/addons/youmi_activitys/public"
                    : ""
                }/plugin/index.html#/caseShow/envelopesTalk/activityShow/${Number(
                  _this.$route.params.id
                )}?staff_id=${_this.$route.query.staff_id}&p_openid=${
                  _this.$route.query.p_openid
                }`;
                return;
              }
            } else {
              _this.toCannonUrl();
            }
          }
          console.log("_this.openid:" + _this.openid);
          if (!_this.openid || _this.openid == "undefined") {
            _this.getWeixinConfig(); // 通过微信授权 获取 openID
          } else {
            _this.getActivityItem(); // 获取活动数据的同时会调用getOrderItem、shareInit函数是、
          }
        }
      });
    },
    toCannonUrl() {
      const _this = this;
      if (location.href.indexOf(_this.domain.mainUrl) > -1) {
        //跳转到炮灰域名
        window.location.href = `${_this.domain.cannonUrl}${
          location.href.indexOf("addons") > -1
            ? "/addons/youmi_activitys/public"
            : ""
        }/plugin/index.html#/caseShow/envelopesTalk/activityShow/${Number(
          _this.$route.params.id
        )}?staff_id=${_this.$route.query.staff_id}&p_openid=${
          _this.$route.query.p_openid
        }&openid=${_this.openid}`;
      }
    },
    // 分享按钮
    shareBtn1() {
      this.cancelShow = true;
    },
    // 取消按钮
    cancelChange() {
      this.cancelShow = false;
    },
    // 生成海报
    shareChange() {
      this.cancelShow = false;
      this.shareBtn();
    },
    // 我的礼品
    giftClick() {
      this.showGift = true;
      this.$toast("数据加载中");
      let params = { activity_id: this.activity_id, openid: this.openid };
      this.$request.prizeList(params).then((res) => {
        this.prizeLists = res.data.data;
        // console.log(this.prizeLists, "this.prizeLists");
      });
    },
    // 奖品核销
    verificationClick(item) {
      console.log(item);
      this.$store.commit("setOrderItem", item);
      this.$router.push("/caseShow/lottoActivity/ApplyPZ");
    },
    // 幸运抽奖
    luckyBtn() {
      if (this.draw == 0)
        return this.$toast(
          "抽奖次数不足，" + "\n" + "请下单或邀请好友增加抽奖参数"
        );
      this.luckyShow = true;
    },
    // 跳转我也要发布活动
    helpPlugChange() {
      window.location.href = `//${location.hostname}${
        location.href.indexOf("addons") > -1
          ? "/addons/youmi_activitys/public"
          : ""
      }/mobile/index.html#/case/${this.activityItem.model}/${
        this.activityItem.id
      }?is_edit=${this.is_edit}&case_id=${this.activityItem.case_id}`;
    },
    // 我的团队
    // myGroup() {
    //   this.$store.commit("setActivityItem", this.activityItem);
    //   this.$store.commit("setThemeColor", this.theme_color);
    //   this.$router.push(
    //     `/caseShow/groupBuying/GroupMy?activity_id=${this.activity_id}&theme_color=${this.theme_color}`
    //   );
    // },

    // 点击我的订单
    orderGroup() {
      this.$store.commit("setActivityItem", this.activityItem);
      this.$store.commit("setThemeColor", this.theme_color);
      this.is_refund = this.val.is_refund;
      this.$router.push(
        `/caseShow/envelopesTalk/GroupOrder?activity_id=${this.activity_id}&staff_id=${this.staff_id}&is_refund=${this.is_refund}&theme_color=${this.theme_color}`
      );
    },

    // 点击红包列表
    // envelopeGroup() {
    //   this.$store.commit("setActivityItem", this.activityItem);
    //   this.$store.commit("setThemeColor", this.theme_color);
    //   this.$router.push(
    //     `/caseShow/groupBuying/GroupEnvelope?activity_id=${this.activity_id}&theme_color=${this.theme_color}`
    //   );
    // },

    // 点击零钱
    wthdrawGroup() {
      console.log(this.activity_id);
      this.$store.commit("setThemeColor", this.theme_color);
      console.log(this.btn_color);
      this.$store.commit("setBtnColor", this.btn_color);
      this.is_withdrawal = this.val.is_withdrawal;
      this.$router.push(
        `/caseShow/envelopesTalk/WithdrawDeposit?activity_id=${this.activity_id}&is_withdrawal=${this.is_withdrawal}&theme_color=${this.theme_color}`
      );
    },
    timer(time) {
      //页面多个定时器
      this.temp = setInterval(() => {
        time.forEach((item, index) => {
          const endTime = new Date(item.endtime).getTime();
          item.dayTime = utils.countDownFun(endTime);
          // this.$set(time,item.dayTime, countDownFun(item.endtime))
          // console.log(this.temp, '6')
        });
      }, 1000);
    },

    // 查询参团
    // getInGroup() {
    //   let params = {
    //     activity_id: Number(this.$route.params.id),
    //   };
    //   this.$request.getInGroup(params).then((res) => {
    //     this.offeredList = res.data.data;
    //     this.timer(this.offeredList);
    //   });
    // },
    // 点击支付
    tuanClick() {
      this.$store.commit("setOfferedItem", {});
      this.$store.commit("setThemeColor", this.theme_color);
      if (this.activityItem.status == 2) return this.$toast("活动已结束");
      this.$store.commit("setActivityItem", this.activityItem);
      // this.getInGroup();
      this.$router.push(
        `/caseShow/envelopesTalk/applyForm?activity_id=${this.activity_id}&staff_id=${this.staff_id}`
      );
      //  this.$router.push('/caseShow/groupBuying/ApplyForm')
      //  this.$router.push('/caseShow/groupBuying/groupDetails')
    },
    // shareClick() {
    //   this.showPop = true;
    // },

    // 抽中
    getscrollList(id) {
      let params = { activity_id: id };
      this.$request.scrollList(params).then((res) => {
        this.scrollList = [...res.data.data, ...this.virtualList];
        this.$forceUpdate();
      });
    },

    // 查询奖品列表
    getPagePriz() {
      const _this = this;
      console.log("activity_id", _this.activity_id);
      const staff_id = _this.$route.query.staff_id;
      let params = { activity_id: _this.activity_id, openid: _this.openid };
      _this.$request.pagePrize(params).then((res) => {
        _this.prizeList = res.data;
        _this.draw = res.data.draw;
      });
    },

    getPagePrizs() {
      this.getPagePriz();
    },

    // 查询浏览记录
    getPageVisit() {
      let params = { activity_id: this.activity_id };
      let list = [];
      this.$request.getPrizeHBTKvisit(params).then((res) => {
        this.visitLists = res.data;
        res.data.forEach((item, x) => {
          if (list.length >= 10) {
            return;
          } else list.push(item);
        });
        console.log(list, "getUpdateWriteoffgetUpdateWriteoff");
        this.visitList = list;
      });
    },

    // 查询订单记录
    getPageOrder() {
      this.loadingAdd = true;
      let data = [];
      let params = { activity_id: this.activity_id };
      this.$request.getPrizeHBTKorder(params).then((res) => {
        console.log(data);
        if (res.data == null) {
          data = [...this.virtualList];
        } else {
          data = [...res.data, ...this.virtualList];
        }
        this.orderList = data;
        console.log(this.orderList, "+++++++++this.orderList++++++++");
        this.loadingAdd = false;
      });
    },

    // 获取虚拟数据
    getAvatarPage() {
      this.$request.getAvatarPage().then((res) => {
        this.virtualList = res.data.data;
        // console.log(this.virtualList, 'virtualList123456');
      });
    },

    // 佣金排行
    getPageCommissionRank() {
      let params = { activity_id: this.activity_id };
      let data = [];
      this.$request.getGroupCommissionRank(params).then((res) => {
        data = [...res.data.data, ...this.virtualList];
        let compare = function (obj1, obj2) {
          var val1 = parseFloat(obj1.price);
          var val2 = parseFloat(obj2.price);
          if (val1 < val2) {
            return -1;
          } else if (val1 > val2) {
            return 1;
          } else {
            return 0;
          }
        };
        let list = data.sort(compare).reverse().splice(0, 10);
        this.commissionList = list;
        console.log(this.commissionList, "commissionList");
      });
    },
    // 分享
    helpTimes(activityItem) {
      const _this = this;
      // console.log("_this.$route.query.p_openid", _this.$route.query.p_openid);
      const p_openid = _this.$route.query.p_openid;
      if (p_openid) {
        let params = {
          activity_id: activityItem.id,
          openid: _this.openid,
          p_openid: p_openid,
        };
        // console.log(p_openid, "p_openid");
        _this.$request.getInvitations(params).then((res) => {});
      }
    },
    // applyClick() {
    //   this.$router.push(`/caseShow/groupBuying/applyForm`);
    // },
    ConfigItem() {
      const _this = this;
      let params = {};
      _this.$request.ConfigItem(params).then((res) => {
        _this.config = res.data.value;
        // console.log("_this.config", _this.config);
      });
    },
    shareInit(activityItem) {
      const _this = this;
      const url = location.href.split("#")[0];
      let params = {
        url: url,
      };
      _this.$request.configJssdk(params).then((res) => {
        wx.config({
          debug: false, // 是否开启调试模式
          appId: res.data.appId, //appid
          timestamp: res.data.timestamp, // 时间戳
          nonceStr: res.data.nonceStr, // 随机字符串
          signature: res.data.signature, // 签名
          jsApiList: [
            "checkJsApi",
            "updateAppMessageShareData",
            "updateTimelineShareData",
          ], // 需要使用的JS接口列表
        });
        let link = "";
        if (location.href.indexOf("staff_id") > -1) {
          link = location.href;
        } else {
          link = `${location.href}?staff_id=${this.staff_id}`;
        }
        const dataShare = {
          title: activityItem.sharetitle,
          desc: activityItem.share_describe, // 分享描述
          link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: activityItem.shareimg, // 分享图标
          success: function () {
            // 设置成功
          },
          fail: function (error) {
            // alert(JSON.stringify(error))
          },
        };
        wx.updateAppMessageShareData(dataShare);
        wx.updateTimelineShareData(dataShare);
        wx.error(function (error) {
          // alert(JSON.stringify(error))
        });
      });
    },
    toTop() {
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 实现滚动效果
      const timeTop = setInterval(() => {
        document.body.scrollTop =
          document.documentElement.scrollTop =
          top -=
            50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
    shareBtn() {
      this.toTop();
      const _this = this;
      let params = {
        id: _this.activity_id,
      };
      _this.$request.getActivityItembase64(params).then((res) => {
        _this.copyimg = res.data;
      });

      let params1 = { activity_id: _this.activity_id, openid: _this.openid };
      this.$request.itemsHelp(params1).then((res) => {
        if (res.data === 1)
          return _this.$toast("无法继续分享,您的总抽奖次数已达上限");
        if (res.data === 2)
          return _this.$toast("今日助力次数已使用完,请明天继续");
        _this.showPop = true;
        _this.$nextTick(function () {
          _this.createQrcode();
        });
      });
    },
    createPoster() {
      // 生成海报
      const _this = this;
      const vm = this;
      vm.createLoading = true;
      const domObj = document.getElementById("posterHtml");
      html2canvas(domObj, {
        useCORS: true,
        allowTaint: true,
        logging: true,
        letterRendering: true,
        onclone(doc) {
          let e = doc.querySelector("#posterHtml");
          e.style.display = "block";
        },
      }).then(function (canvas) {
        // 在微信里,可长按保存或转发
        // let url = canvas.toDataURL('image/png')
        // const a = document.createElement('a'); // 创建a标签
        // a.setAttribute('download', `${new Date().getTime()}.png`);// download属性
        // a.setAttribute('href', url);// href链接
        // a.click();// 自执行点击事件
        let url = canvas.toDataURL("image/png");
        vm.createImg = url;
        vm.showImgPop = true;
        vm.createLoading = false;
        vm.showPop = false;
      });
    },
    createQrcode() {
      const _this = this;
      let href = `${location.protocol}//${location.hostname}${
        location.href.indexOf("addons") > -1
          ? "/addons/youmi_activitys/public"
          : ""
      }/plugin/index.html#/caseShow/${_this.activityItem.model}/activityShow/${
        _this.activity_id
      }?staff_id=${_this.staff_id}&p_openid=${_this.openid}`;

      // new QRCode('qrcode', {
      //   width: 120, // 设置宽度，单位像素
      //   height: 120, // 设置高度，单位像素
      //   text: href // 设置二维码内容或跳转地址
      // })
      let canvas = document.getElementById("qrCode-canvas");
      QRCode.toCanvas(canvas, href, (error) => {
        if (error) {
          // console.log(error);
        } else {
          canvas.style.width = "12rem";
          canvas.style.height = "12rem";
          // _this.createPoster()
        }
      });
    },
    // 获取该活动的订单信息
    getOrderItem() {
      const _this = this;
      let params = {
        openid: _this.openid,
        activity_id: Number(this.$route.params.id),
      };
      _this.$request.getOrderItem(params).then((res) => {
        const orderItem = res.data;
        if (orderItem.openid == this.openid) {
          _this.is_apply = true;
        }
        // console.log("-----orderItem-----", orderItem.status);
        _this.$store.commit("setOrderItem", orderItem);
        // 获取订单列表，并判断是否有自己的订单
        // let orderList = res.data.val
        // console.log('-----orderList-----',orderList)
        // orderList.forEach(item=>{
        // 	if(item.openid==_this.openid){
        // 		_this.is_apply = true
        // 	}
        // })
        //      if(res.data.val&&res.data.val!=null&&res.data.val.length>0){

        //        _this.is_apply = true
        //      }
      });
    },
    getWeixinConfig() {
      const _this = this;
      let params = {};
      _this.$request.getWeixinConfig(params).then((res) => {
        _this.$store.commit("setAppid", res.data.value.appid);
        _this.$store.commit("setSecret", res.data.value.secret);
        //_this.getCode(res.data.value.appid)
        _this.getCode(res.data.value.appid);
      });
    },
    getCode(appid) {
      // 非静默授权，第一次有弹框
      const _this = this;
      const code = this.getUrlParam("code"); // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
      const local = window.location.href;
      if (code == null || code === "") {
        window.location.href =
          "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
          appid +
          "&redirect_uri=" +
          encodeURIComponent(local) +
          "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
      } else {
        _this.$store.commit("setCode", code);
        _this.getOpenId(code); //把code传给后台获取用户信息
      }
    },
    getUrlParam(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return unescape(r[2]);
      return null;
    },
    getFansItem(item) {
      // console.log("fansItem:", item);
      const _this = this;
      let params = {
        openid: item.openid || _this.openid,
        nickname: item.nickname,
        name: item.nickname,
        avatar: item.avatar,
        province: item.province,
        city: item.city,
      };
      // console.log("item.openid", item.openid);
      // console.log("fansItem:", item);
      _this.$request.getFansItem(params).then((res) => {
        // 默认
        // _this.getOrderItem();
      });
    },
    getOpenId(code) {
      const _this = this;
      let params = {
        appid: _this.$store.state.appid,
        secret: _this.$store.state.secret,
        code: code,
      };
      _this.$request.getOpenid(params).then((res) => {
        if (res.data[0] && res.data[0] == 1) {
          //这里需进行页面跳转，把当前链接中的code信息给过滤掉
          const url = location.href;
          window.location.href = `${url.split("?")[0]}#${url.split("#")[1]}`;
        } else {
          const userInfo = res.data[0];
          // alert('userInfo:'+JSON.stringify(userInfo))
          const openid = userInfo.openid;
          _this.openid = openid;
          const nickname = userInfo.nickname;
          const headimgurl = userInfo.headimgurl;
          const province = userInfo.province;
          const city = userInfo.city;
          // const headimgurl = userInfo["headimgurl"];
          // const headimgurl = userInfo["headimgurl"];
          // const unionid = res.data.unionid;
          _this.$store.commit("setOpenid", openid);
          localStorage.setItem("COPENID", openid);
          // alert('COPENID:'+openid)
          const item = {
            openid,
            nickname,
            avatar: headimgurl,
            province,
            city,
            name: nickname,
          };
          _this.$store.commit("setUserInfo", item);
          localStorage.setItem("USERINFO", JSON.stringify(item));
          _this.getFansItem(item);
          _this.getActivityItem();
          _this.toCannonUrl();
        }
      });
    },
    judgeIsApply() {
      const _this = this;
      const apply_list = _this.activityItem.apply_list;
      // _this.openid = "111"
      const isApply = apply_list.some((res) => res.openid == _this.openid);
      this.activityItem.is_apply = isApply;
    },
    getActivityItem() {
      const _this = this;
      const toast = Toast.loading({
        forbidClick: true,
        message: "加载中...",
      });
      localStorage.setItem("activity_id", Number(_this.$route.params.id));
      let params = {
        id: Number(_this.$route.params.id),
        openid: _this.openid,
      };
      _this.$request.getActivityItem(params).then((res) => {
        _this.activityItem = res.data;
        console.log(_this.activityItem, "_this.activityItem");
        // console.log(_this.activityItem, '_this.activityItem');
        _this.val = res.data.val;
        _this.endtime = res.data.end_time;
        setInterval(() => {
          this.timeDown(_this.endtime);
        }, 1000);
        _this.theme_color = res.data.theme_color;
        _this.btn_color = res.data.btn_color;
        // console.log(_this.theme_color, "_this.theme_color");
        _this.introduce = res.data.introduce;
        _this.create_form = res.data.create_form;
        document.title = _this.activityItem.title;
        if (_this.activityItem) {
          _this.getOrderItem();
          _this.getscrollList(_this.activityItem.id);
          _this.getPagePriz();
          _this.getPageVisit();
          _this.getPageOrder();
          _this.getPageCommissionRank();
          _this.getMerchantItem(_this.activityItem.merchant_id);
          _this.shareInit(_this.activityItem); // 调用微信分享的API
          _this.helpTimes(_this.activityItem);
          // _this.getInGroup();
        }
        _this.$store.commit("setActivityItem", _this.activityItem);
        document.title = _this.activityItem.title;
        toast.clear();
      });
    },
    // 获取商户
    getMerchantItem(merchant_id) {
      let params = {
        id: merchant_id,
      };
      this.$request.getMerchantItema(params).then((res) => {
        this.door_header = res.data.door_header;
        this.$store.commit("setMerchant", res.data);
      });
    },
    toCaseView() {
      window.location.href = `//${location.hostname}${
        location.href.indexOf("addons") > -1
          ? "/addons/youmi_activitys/public"
          : ""
      }/mobile/index.html`;
    },
    toView(to) {
      if (to == "applyTrue") {
        this.$router.push(`/caseShow/applyActivity/applyPZ`);
      } else {
        this.$router.push(`/caseShow/applyActivity/applyForm`);
      }
    },
    // 立即倒计时
    timeDown(time) {
      const endTime = new Date(time).getTime();
      const nowTime = new Date(time);
      var date = new Date();
      var now = date.getTime(nowTime);
      //设置截止时间
      var endDate = new Date(endTime);
      var end = endDate.getTime();
      //时间差
      var rightTime = end - now; //截止时间减去当前时间
      if (rightTime > 0) {
        //判断剩余倒计时时间如果大于0就执行倒计时否则就结束
        var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
        var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
        var mm = Math.floor((rightTime / 1000 / 60) % 60);
        var ss = Math.floor((rightTime / 1000) % 60);
        this.DD = dd > 9 ? dd : "0" + dd;
        this.HH = hh > 9 ? hh : "0" + hh;
        this.MM = mm > 9 ? mm : "0" + mm;
        this.SS = ss > 9 ? ss : "0" + ss;
      } else {
        this.isfail = true;
      }
    },
  },
};
</script>